<template>
  <div class="search-panel">
    <el-row class="m-header-searchbar">
      <el-col :span="3" class="left">
        <img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" alt="美团">
      </el-col>
      <el-col :span="15" class="center">
        <div class="wrapper">
          <el-input
            v-model="search"
            placeholder="搜索商家或地点"
            @focus="focus"
            @blur="blur"
            @input="textInput"
            @keyup.enter.native="to"
          />
          <button class="el-button el-button--primary" @click="to">
            <i class="el-icon-search" />
          </button>
          <dl v-if="isHotPlace" class="hotPlace">
            <dt>热门搜索</dt>
            <dd v-for="(item,index) in hotPlace.slice(0, 4)" :key="index">
              <a :href="'/products?keyword='+item.name">
                {{ item.name }}
              </a>
            </dd>
          </dl>
          <dl v-if="isSearchList" class="searchList">
            <dd v-for="(item,index) in searchList" :key="index">
              <a :href="'/products?keyword='+item.name">
                {{ item.name }}
              </a>
            </dd>
          </dl>
        </div>
        <p class="suggest">
          <a v-for="(item,index) in hotPlace.slice(0, 5)" :key="index" :href="'/products?keyword='+item.name">
            {{ item.name }}
          </a>
        </p>
        <ul class="nav">
          <li>
            <nuxt-link to="/" class="takeout">
              美团外卖
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="takeout">
              猫眼电影
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="takeout">
              美团酒店
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="takeout">
              民宿／公寓
            </nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="takeout">
              商家入驻
            </nuxt-link>
          </li>
        </ul>
      </el-col>
      <el-col :span="6" class="right">
        <ul class="security">
          <li>
            <i class="refund" />
            <p class="txt">
              随时退
            </p>
          </li>
          <li>
            <i class="single" />
            <p class="txt">
              不满意免单
            </p>
          </li>
          <li>
            <i class="overdue" />
            <p class="txt">
              过期退
            </p>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  async asyncData (ctx) {
    const { status: status3, data: { result } } = await ctx.$axios.get('/search/hotPlace', {
      params: {
        city: ctx.store.state.geo.position.replace('市', '')
      }
    })
    ctx.hotPlace = result
    ctx.store.commit('home/setHotPlace', status3 === 200 ? result : [])
  },
  data () {
    return {
      isFocus: false,
      search: '',
      hotPlace: this.$store.state.home.hotPlace,
      searchList: [],
      city: this.$store.state.geo.position
    }
  },
  computed: {
    isHotPlace () {
      return this.isFocus && !this.search
    },
    isSearchList () {
      return this.isFocus && this.search
    }
  },
  methods: {
    focus () {
      this.isFocus = true
    },
    blur () {
      const self = this
      setTimeout(() => {
        self.isFocus = false
      }, 200)
    },
    async textInput () {
      if (this.search) {
        const { status, data: { top } } = await this.$axios.get('/search/top', {
          params: {
            input: this.search,
            city: this.city.replace('市', '')
          }
        })
        if (status === 200) {
          this.searchList = top.slice(0, 10)
        } else {
          this.searchList = []
        }
      } else {
        this.searchList = []
      }
    },
    to () {
      location.href = '/products?keyword=' + this.search
    }
  }
}
</script>

<style scoped>

</style>
